<template>
    <div>
        <Tabs :value="tabValue" @on-click="tabClick">
            <TabPane label="已上架" name="0"></TabPane>
            <!-- <TabPane label="仓库中" name="1"></TabPane> -->
            <TabPane label="已下架" name="1"></TabPane>
        </Tabs>
        <div>
            <div class="search-con search-con-top">
                名称：
                <Input v-model="searchData.name" style="width: 200px"></Input>
                <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
                <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">重置</Button>
                <Button slot="extra" @click="goodsStatus(false, 1)" type="warning" v-if="tabValue == 1"
                    style="margin-left: 10px;">批量下架</Button>
                <Button slot="extra" @click="goodsStatus(false, 0)" type="info" v-if="tabValue != 1"
                    style="margin-left: 10px;">批量上架</Button>
                <Button slot="extra" @click="showAddRoleDrawer(false)" type="primary" v-if="tabValue == 0"
                    style="margin-left: 10px;">添加商品</Button>
            </div>
            <br>
            <Table :columns="columns" :data="list" @on-sort-change="customSort" :highlight-row="true" max-height="800"
                border stripe @on-selection-change="tableSelect">
                <template slot-scope="{ row , index}" slot="memberSlot">
                    <Tooltip content="编辑" style="margin-left: 10px;" placement="top">
                        <Icon type="ios-create" size="24" color="#2d8cf0" style="cursor: pointer;"
                            @click="showAddRoleDrawer(row)" />
                    </Tooltip>
                    <Tooltip content="上架" style="margin-left: 10px;" placement="top">
                        <Icon type="md-arrow-round-up" size="24" color="#2d8cf0" style="cursor: pointer;"
                            @click="goodsStatus(row.id, 0)" v-if="tabValue == 1" />
                    </Tooltip>
                    <Tooltip content="下架" style="margin-left: 10px;" placement="top">
                        <Icon type="md-arrow-round-down" size="24" color="#2d8cf0" style="cursor: pointer;"
                            @click="goodsStatus(row.id, 1)" v-if="tabValue == 0" />
                    </Tooltip>
                    <Tooltip content="删除" style="margin-left: 10px;" placement="top">
                        <Icon type="md-trash" size="24" color="#ed4014" style="cursor: pointer;"
                            @click.stop="del(row.id, 2)" />
                    </Tooltip>
                </template>
            </Table>
            <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
            </Paginate>
            <Drawer title="商品信息" :closable="true" width="60" v-model="showAdd">
                <Form ref="formValidate" :model="goodsInfo" :label-width="100">
                    <FormItem label="商品名称">
                        <Input v-model="goodsInfo.name" placeholder="商品名称"></Input>
                    </FormItem>
                    <FormItem label="缩略图" class="item">
                        <Upload ref="upload" name="image" :action="action_url" :show-upload-list="false" :headers="header"
                            :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
                            :on-success="handleSuccess">
                            <Button icon="ios-cloud-upload-outline">点击上传</Button>
                        </Upload>
                    </FormItem>
                    <FormItem class="item">
                        <img :src="baseImgeUrl + goodsInfo.image" style="width: 200px;height: 200px;"
                            v-if="goodsInfo.image">
                    </FormItem>
                    <FormItem label="积分">
                        <Input v-model="goodsInfo.integral" placeholder="积分" type="number"></Input>
                    </FormItem>
                    <FormItem label="原价">
                        <Input v-model="goodsInfo.original" placeholder="原价" type="number"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="submit">提交</Button>
                    </FormItem>
                </Form>
            </Drawer>
        </div>
    </div>
</template>

<script>
import config from "@/config";
import { getToken } from "../../libs/util";
import Paginate from "@/components/paginate/paginate.vue";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    name: "integralGoodsList",
    components: {
        Paginate,
    },
    data() {
        return {
            baseImgeUrl: baseImgeUrl,
            action_url: baseUrl + "/admin/image/uploadImg",
            header: { token: getToken() },
            visible: false,
            imgUrl1: '',
            // 列表
            columns: [
                {
                    type: 'selection',
                    align: "center",
                    width: 60,
                    align: 'center'
                },
                {
                    title: 'ID',
                    align: "center",
                    key: 'id',
                    sortable: 'custom',
                },
                {
                    title: '图片',
                    align: "center",
                    key: 'img',
                    render: (h, param) => {
                        return h("img", {
                            attrs: {
                                src: baseImgeUrl + param.row.image
                            },
                            style: {
                                width: '60px',
                                height: '60px'
                            }
                        });
                    },
                },
                {
                    title: '名称',
                    align: "center",
                    key: 'name',
                    sortable: 'custom',
                },
                {
                    title: '积分',
                    align: "center",
                    key: 'integral',
                    sortable: 'custom',
                },
                {
                    title: '原价',
                    align: "center",
                    key: 'original',
                    sortable: 'custom',
                },
                {
                    title: '创建时间',
                    align: "center",
                    key: 'create_time',
                    sortable: 'custom',
                },
                {
                    title: '操作',
                    align: "center",
                    key: 'make',
                    slot: 'memberSlot',
                },
            ],
            // 数据
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,
                is_del: 0
            },
            showAdd: false,
            cateList: [],
            // 管理信息
            goodsInfo: {},
            tabValue: "0",
            tableSelectIdArr: [],
        }
    },
    methods: {
        getList() {
            const param = {
                ...this.searchData
            };
            this.$axios('/admin/integralGoods/getList', param).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
        },
        reset() {
            this.searchData.page = 1;
            this.searchData.name = "";
            this.getList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
        },
        customSort(column, key, order) {
            this.searchData.order_by = column.key;
            this.searchData.sort = column.order;
            this.getList();
        },
        // 显示添加角色弹窗
        showAddRoleDrawer(row) {
            // this.getCategoryArr();
            if (row) {
                console.log(row);
                this.goodsInfo = row;
                this.goodsInfo.type = this.goodsInfo.type + '';
            } else {
                this.goodsInfo = {
                    id: 0,
                    name: "",
                    image: "",
                    tag: "0",
                    stock: "",
                    reward_amount: "",
                    status: 1,
                    banner: [],
                    detail: [],
                    goods_sku: [{ "name": "", "sell_price": "", "market_price": "", "stock": "" }],
                }
            }
            this.showAdd = true;
        },
        // 添加角色
        submit() {
            const params = {
                ...this.goodsInfo
            };
            if (this.goodsInfo.id > 0) {
                this.$axios('/admin/integralGoods/edit', params).then(res => {
                    this.$Message.success('保存成功');
                    this.showAdd = false;
                    this.getList();
                })
            } else {
                this.$axios('/admin/integralGoods/add', params).then(res => {
                    this.$Message.success('保存成功');
                    this.showAdd = false;
                    this.getList();
                })
            }

        },
        handleSuccess(res, file) {
            this.$set(this.goodsInfo, 'image', res.data.src)
            // this.goodsInfo.image = res.data.src;
        },
        handleSuccess3(res, file) {
            this.$set(this.goodsInfo, 'limit_intro', res.data.src)
            // this.goodsInfo.limit_intro = res.data.src;
        },
        handleSuccess1(res, file) {
            this.goodsInfo.banner.push(res.data.src);
        },
        handleSuccess2(res, file) {
            this.goodsInfo.detail.push(res.data.src);
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
        handleView(item) {
            this.imgUrl1 = item;
            this.visible = true;
        },
        handleRemove(index, type) {
            if (type == 0) {
                this.goodsInfo.banner.splice(index, 1);
            } else {
                this.goodsInfo.detail.splice(index, 1);
            }
        },
        del(id, status) {
            this.$axios('/admin/integralGoods/status', { id: id, status: status }).then(res => {
                this.$Message.success('删除成功');
                this.getList();
            })
        },
        getCategoryArr() {
            this.$axios('/admin/integralGoods/getCategoryArr', {}).then(res => {
                this.cateList = res;
            });
        },
        tabClick(value) {
            this.tabValue = value;
            this.searchData.is_del = value;
            this.getList();
        },
        tableSelect(selection) {
            let arr = [];
            selection.forEach(item => {
                arr.push(item.id);
            });
            this.tableSelectIdArr = arr;
        },
        goodsStatus(id, status) {
            let idArr = [];
            if (id) {
                idArr.push(id);
            } else {
                idArr = this.tableSelectIdArr;
            }
            this.$axios('/admin/integralGoods/status', { id: idArr, status: status }).then(res => {
                this.$Message.success('执行成功');
                this.getList();
            });
        },
        delImg() {
            this.goodsInfo.limit_intro = "";
        },
        incrSku() {
            let attr = { "name": "", "sell_price": "", "market_price": "", "stock": "" };
            this.goodsInfo.goods_sku.push(attr);
        },
        decSku(index) {
            this.goodsInfo.goods_sku.splice(index, 1);
        },
    },
    created() {
        // 查询自己管理员
        this.getList();
    }
}
</script>

<style>
.pos>div {
    float: left;
    background-color: #00000090;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 100%;
    z-index: 100;
}

.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
